RecyclerView使用——入门篇

2017-07-23

RecyclerView类似于ListView和GridView，但又因为的可定制性等等优于ListView和GridView，是一个相当强大的控件。

简述

RecyclerView类似于ListView和GridView，但又因为的可定制性等等优于ListView和GridView，是一个相当强大的控件。所以今天来实现一个简单的RecycleView，如下图所示

XML文件

主要由以下两个xml文件组成

activity_main.xml：顾名思义是主界面的布局文件

list_item_layout：这个是RecyclerView中item的布局文件

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v7.widget.RecyclerView
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:id="@+id/recyclerView"
        android:scrollbars="vertical"
        android:scrollbarFadeDuration="1"
        />
</RelativeLayout>

list_item_layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="96dp"
    android:layout_width="match_parent"
    xmlns:fresco="http://schemas.android.com/tools"
    android:focusable="true"
    android:clickable="true"
    android:foreground="?android:attr/selectableItemBackground"
    app:cardCornerRadius="4dp"
    app:cardElevation="1dp"
    app:cardPreventCornerOverlap="true"
    android:layout_marginTop="8dp">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:paddingLeft="8dp"
        android:paddingRight="8dp">
        <TextView
            android:id="@+id/textViewTitle"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:layout_weight="1"
            android:ellipsize="end"
            android:gravity="center_vertical"
            android:maxLines="3"
            android:paddingBottom="8dp"
            android:paddingTop="8dp"
            android:textSize="18sp" />
        <ImageView
            android:id="@+id/image"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_gravity="center_vertical"
            android:src="@drawable/fail"
            />
    </LinearLayout>
</android.support.v7.widget.CardView>

这里用CardView，需要添加依赖

1	compile 'com.android.support:cardview-v7:26.0.0-alpha1'

CardView是一个很实用的东西，可以实现很多效果，这里只讲RecyclerView，所以就不详细介绍了

java文件

主要也是有两个

MainActivity.java : 主Activity
MyAdapter.java：自己定制所需的适配器
先从MyAdapter介绍：

首先要定义一个MyHolder，我把它理解成一个item的容器，里面把每个item中的组件先初始化

 / **
 * 自定义Holder
 */
public class MyHolder extends RecyclerView.ViewHolder implements RecyclerView.OnClickListener{
    ImageView imageView;
    TextView title;
    public MyHolder(View itemView) {
        super(itemView);
        imageView = (ImageView) itemView.findViewById(R.id.image);
        title = (TextView) itemView.findViewById(R.id.textViewTitle);
        itemView.setOnClickListener(this);
    }
    @Override
    public void onClick(View v) {
    }
}

第二步将建立的MyAdapter继承RecyclerView.Adapter

1	public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyHolder>

最后在onBindViewHolder(MyHolder holder, final int position) 方法中实现自己想要显示的内容，以及OnClick事件，如：

@Override
    public void onBindViewHolder(MyHolder holder, final int position) {
        holder.title.setText(list.get(position));
       // holder.imageView.setImageDrawable(R.drawable.test_image);
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(context,list.get(position)+"被点击",Toast.LENGTH_LONG).show();
            }
        });
    }

完整MyAdapter.java

package com.recyclerviewtest;
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import java.util.ArrayList;
/**
 * Created by asus on 2017/3/21.
 */
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyHolder> {
    private ArrayList<String> list;
    private final Context context;
    private final LayoutInflater inflater;
    public MyAdapter(Context context, ArrayList<String> list){
        this.context = context;
        this.list = list;
        inflater = LayoutInflater.from(context);
    }
    /**
     * 创建Holder
     * @param parent
     * @param viewType
     * @return
     */
    @Override
    public MyHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view  = inflater.inflate(R.layout.list_item_layout,parent,false);
        return new MyHolder(view);
    }
    @Override
    public void onBindViewHolder(MyHolder holder, final int position) {
        holder.title.setText(list.get(position));
       // holder.imageView.setImageDrawable(R.drawable.test_image);
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(context,list.get(position)+"被点击",Toast.LENGTH_LONG).show();
            }
        });
    }
    @Override
    public int getItemCount() {
        return list.size();
    }
    /**
     * 自定义Holder
     */
    public class MyHolder extends RecyclerView.ViewHolder implements RecyclerView.OnClickListener{
        ImageView imageView;
        TextView title;
        public MyHolder(View itemView) {
            super(itemView);
            imageView = (ImageView) itemView.findViewById(R.id.image);
            title = (TextView) itemView.findViewById(R.id.textViewTitle);
            itemView.setOnClickListener(this);
        }
        @Override
        public void onClick(View v) {
        }
    }
}

MainActivity里面的操作

设置布局管理器

1	mRecyclerView.setLayoutManager(new LinearLayoutManager(this));

设置Adapter
1
mRecyclerView.setAdapter(myAdapter);

完整MainActivity.java

package com.recyclerviewtest;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
    private RecyclerView mRecyclerView;
    private MyAdapter myAdapter;
    private ArrayList<String> list = new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mRecyclerView = (RecyclerView) findViewById(R.id.recyclerView);
        //设置布局管理器
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
        for(int i =0;i<20;i++){
            list.add("这是标题"+i);
        }
        myAdapter = new MyAdapter(this,list);
        //设置Adapter
        mRecyclerView.setAdapter(myAdapter);
    }
}

最后说一句

这里就先简单实现一下RecyclerView的用法，与ListView非常相像，接下来将会更新如果在RecyclerView中如何加入头布局，例如加上一个图像浏览的ViewPager，还有瀑布流布局。

简述